<template>
  <div>
    <van-action-sheet v-model="show" title="选择支付方式" :round="false">
      <van-radio-group v-model="radio">
        <div class="single">
          <div class="single-one">
            <img src="https://mall.s.maizuo.com/6bd7bc19e684a4a533710a92f1ff20cc.png" alt />
            <span>微信支付</span>
          </div>
          <van-radio name="1" checked-color="red" ></van-radio>
        </div>
        <div class="single">
          <div class="single-one">
            <img src="https://mall.s.maizuo.com/ad6fa2d9dbd8ee89104d45e60c7bb760.png" alt />
            <span>支付宝支付</span>
          </div>
          <van-radio name="2" checked-color="red" ></van-radio>
        </div>
        <!-- <van-radio name="2" checked-color="#red">单选框 2</van-radio> -->
      </van-radio-group>
      <van-button type="primary" size="large" color="#c03131" @click.native="goto">支付 ¥ 45.00</van-button>
    </van-action-sheet>
  </div>
</template>
<script>
export default {
  data() {
    return {
      show: "",
      radio: "1",
    };
  },
  methods: {
    goto(){
      this.$router.push("/pay")
    }
  },
};
</script>
<style scoped>
.single {
  display: flex;
  justify-content: space-between;
  /* margin-left: 15px; */
  position: relative;
}
.single-one {
  display: flex;
  align-items: center;
  height: 50px;
  
  color: #191a1b;
  font-size: 15px;
}
.single-one img {
  /* padding-right: 10px; */
  height: 21px;
  width: 21px;
}
.single::after{
  content: " ";
    position: absolute;
    left: 0;
    bottom: 0;
    right: 0;
    height: 1px;
    border-bottom: 1px solid #ededed;
    color: #ededed;
    transform-origin: 0 100%;
    transform: scaleY(.5);
}
.van-action-sheet__content{
  margin: 0px 15px;
}
.van-button{
  margin: 26px 0px 15px 0px;
}
</style>